<template>
	<view class="payment-success">
		<view class="ps-body">

			<navBar title="支付成功" background-color="transparent"></navBar>

			<view class="ps-header">
				<view class="ps-h-content">
					<view class="image">
						<u--image src="/static/img/pay@2x.png" width="62rpx" height="64rpx"></u--image>
					</view>
					<text class="success-text">订单付款成功</text>
				</view>
			</view>

			<!-- 支付信息 -->
			<view class="pay-info">
				<view class="pi-item">
					<text class="title">支付方式：</text>
					<text>{{ payType[order.payType] }}</text>
				</view>
				<view class="pi-item">
					<text class="title">支付金额</text>
					<text>¥{{ order.payMoney || 0 }}</text>
				</view>
			</view>

			<!-- tips -->
			<view class="ps-tips">
				<u--image src="/static/img/car@2x.png" width="44rpx" height="34rpx"></u--image>
				<view class="text">
					<text class="title">温馨提示：</text>
					<text>阿特拉斯卡友之家不会以订单异常、系统升级为由要求您点击任何网址链接进行退款操作。</text>
				</view>
			</view>
		</view>

		<view class="ps-footer">
			<u-button type="primary" plain @click="toOrder">查看订单</u-button>
			<u-button type="primary" @click="toIndex">回到首页</u-button>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import {
		mapGetters
	} from 'vuex'

	export default {
		components: {
			navBar
		},
		data() {
			return {
				order: {},
				payType: {
					score: '积分',
					wx: '微信支付',
					alipay: '支付宝',
				},
			    currentId:''
			}
		},
		computed: {
			...mapGetters('global', ['getSystemInfo']),
			...mapGetters('user', ['getUserInfo']),
		},
		methods: {
			// 获取订单信息
			async getOrder(data) {
				const res = await this.$request({
					url: '/order-center/road/rescue/getRoadRescueDetail',
					data: {
						id: data.orderId,
						userId: this.getUserInfo.id
					}
				})
				this.currentId = data.orderId
				this.order = res.datas
			},

			// 跳转订单页
			toOrder() {
				uni.navigateTo({
					url: `/rescuePack/rescueDetail/index?id=${this.currentId}`
				})
			},

			// 回到首页
			toIndex() {
				uni.switchTab({
					url: '/pages/index/index/index'
				})
			}
		},

		onLoad() {
			// const eventChannel = this.getOpenerEventChannel()
			// eventChannel.on('paymentSuccess', this.getOrder)
			uni.$on('paymentSuccess', this.getOrder)
		}
	}
</script>

<style scoped lang="scss">
	.payment-success {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.ps-body {

			/deep/ .uicon-home,
			/deep/ .uniui-back,
			/deep/ .a-title {
				color: #fff !important;
			}

			flex: 1;
		}

		.ps-header {
			background-color: rgba(207, 26, 27, 1);
			color: #fff;
			height: 570rpx;
		}

		.ps-h-content {
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-top: 210rpx;

			.image {
				margin: 0 auto;
			}

			.success-text {
				font-size: 44rpx;
				margin: 32rpx 0 0;
				line-height: 1;
			}

			.code {
				width: 250rpx;
				height: 72rpx;
				line-height: 72rpx;
				margin: 26rpx auto 0;
				text-align: center;
				background-color: rgba(255, 255, 255, 1);
				border-radius: 36rpx;
				color: rgba(207, 26, 27, 1);
			}
		}

		.pay-info {
			font-size: 28rpx;
			color: rgba(0, 0, 0, 0.85);
			border-radius: 12rpx;
			margin: -70rpx 20rpx 0;
			padding: 30rpx 25rpx;
			background-color: #fff;

			.pi-item {
				line-height: 2;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.title {
					color: rgba(0, 0, 0, 0.45);
				}
			}
		}

		.ps-tips {
			display: flex;
			flex-direction: row;
			gap: 18rpx;
			border-radius: 12rpx;
			margin: 24rpx 20rpx 0;
			padding: 30rpx 25rpx;
			background-color: #fff;

			.title {
				font-weight: bold;
			}

			.text {
				font-size: 26rpx;
				color: rgba(0, 0, 0, 0.65);
			}
		}

		.ps-footer {
			display: flex;
			flex-direction: row;
			gap: 40rpx;
			background-color: #fff;
			padding: 32rpx 32rpx env(safe-area-inset-bottom);
		}
	}
</style>